<template>
  <div class="foodList">
    <v-header
      :fixed="true"
      title="详情"
      :opacity="opacity"
      :headerBg="headerBg"
      :fontColor="fontColor"
      style="border-bottom: 1px solid grey;">
    </v-header>

    <scroll
      @scroll="scroll"
      :listenScroll="true"
      :probeType="3"
      :bounce="false"
      ref="scroll">

      <div class="foodListItem" @click.stop="showAtlas = true">
        <div class="foodItemTopImg" v-if="this.foodStoreList[0]">
          <p class="img-num">
            <i class="icon iconfont icon-image"></i>
            {{this.foodStoreList[0].storeUrl.length}}
          </p>
          <img class="detailTopBgImg" v-lazy="this.foodStoreList[0].storeUrl[1] || this.foodStoreList[0].storeUrl[0]" alt="">
          <img class="detailBgImg" src="@/assets/img/detailBg.png" alt="">
        </div>
      </div>

      <div class="foodContent">
        <div class="foodTopTitle" v-if="foodStoreList.length > 0">
          <h3>{{foodStoreList[0].name}}</h3>
          <div class="foodTopAddress">
            <i class="fa fa-map-marker" aria-hidden="true"></i>
             {{foodStoreList[0].address}}
          </div>
        </div>

<!-- 更多信息 -->
        <div class="foodMoreInformation foodTopTitle" v-if="foodStoreList.length > 0">
          <h3>更多信息</h3>
          <span style="color: #999">营业时间：{{foodStoreList[0].storeOpeningDate}}</span>
          <div style='color: #999'>{{foodStoreList[0].businessStartTime}} ~ {{foodStoreList[0].businessEndTime}}</div>
        </div>

<!-- 门店套餐 -->
        <div class="foodSetMeal">
          <h3 class="foodItemAll">精品菜单 ({{foodListItem.length}})</h3>
          <div class="foodListItem">
            <div class="foodItem" v-for="item in foodListItem" :key="item.id">
              <img v-lazy="item.dishesImages" alt="">
              <div class="foodItemRight">
                <p class="foodTitle">{{item.dishesName}}</p>
                <div class="price">
                  <span class="priceDetails">¥ {{item.dishesPrice}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

<!-- 更多推荐 -->
        <h3 class="foodCommend">推荐美食</h3>
        <div class="contentWrapper">
          <scroll direction="horizontal" style="width: 100%;">
            <div slot="content" class="scrollRecom" ref="scrollRecom">
              <div class="recommend" v-for="item in recommendList" :key="item.id" @click="tofoodDetailsOne(item.id)">
                <div v-if="item.storeUrl">
                  <img v-lazy="item.storeUrl[1] || item.storeUrl[0]" alt="">
                  <div class="centent">{{item.name}}</div>
                  <div class="cententPrice">¥ {{item.consumptionPerPerson}}</div>
                </div>
              </div>
            </div>
          </scroll>
        </div>
      </div>
    </scroll>

<!-- 图集 -->
    <div v-transfer-dom>
      <previewer :list="atlas" :options="{loop: false}" ref="previewer"></previewer>
    </div>
    <div v-transfer-dom>
      <popup v-model="showAtlas" position="bottom" width="100%" height="100%" class="popup-wrapper">
        <div class="home-atlas" style="overflow: hidden;">
          <v-header title="图集" :handleClick="true" @back="showAtlas = false"></v-header>

          <div :style="{height: atlasScrollHeight + 'px'}" style="margin: 3.5px; overflow-x: hidden; overflow-y: scroll;" v-if="showAtlas && atlas.length > 0">
            <waterfall :calHeight="true" :gap="7" :imgsArr="atlas" :customWidth="itemWidth" @clickItem="previewAtlas" loadingTip="正在加载景区图集...">
            </waterfall>
          </div>

        </div>
      </popup>
    </div>


  </div>
</template>

<script type='text/ecmascript-6'>
import VHeader from '@/components/v-header/v-header'
import { isIphoneX } from '@/assets/js/brower'
import Scroll from '@/components/scroll/scroll'
import axios from '@/api/axiosApi'
import headerBg from '@/assets/img/cart_headerBg.png'
import { QINIU_PREFIX } from '@/api/config'
import { mapGetters } from 'vuex'
import Previewer from '@/components/previewer/previewer'
import { TransferDom, Popup } from 'vux'
import Waterfall from '@/components/waterfall/waterfall'

export default {
  data () {
    return {
      marginTop: 0,
      opacity: 0,
      foodStoreList: [],
      foodListItem: [],
      recommendList: [],
      headerBg,
      fontColor: '#fff',
      atlas: [],
      showAtlas: false
    }
  },
  components: {
    VHeader,
    Scroll,
    Previewer,
    Popup,
    Waterfall
  },
  directives: {
    TransferDom
  },
  computed: {
    ...mapGetters(['position'])
  },
  beforeRouteUpdate(to, from, next) {
    next()
    this.showAtlas = false
  },
  created () {
    this.itemWidth = (window.innerWidth - 42) / 2

    if (isIphoneX()) {
      this.marginTop = 74
      this.atlasScrollHeight = window.innerHeight - (40 + 34)
    } else {
      this.marginTop = 60
      this.atlasScrollHeight = window.innerHeight - (40 + 24)
    }
    this.getFoodStore(this.$route.params.id)
    this.getFoodList(this.$route.params.id)
    this.getRecommend(this.$route.params.id)
  },
  watch: {
    '$route'(to, from) {
      if (to.name === 'FoodDetailsOne') {
        this.getFoodStore(this.$route.params.id)
        this.getFoodList(this.$route.params.id)
        this.getRecommend(this.$route.params.id)
      }
    }
  },
  methods: {
    scroll (position, movingY) {
      if (position.y <= -220) {
        this.opacity = 1
        this.fontColor = '#000'
      } else {
        this.opacity = Math.abs(position.y / 220)
        this.fontColor = '#fff'
      }
    },
    previewAtlas(item, index) {
      // 预览图片
      this.$refs.previewer.show(index)
    },
// 门店数据
    getFoodStore (id) {
      axios.get(this, `/v1/storeFood?id=${id}&longitude=${this.position.slice(0, 1)}&latitude=${this.position.slice(1, 2)}`, null, (data) => {
        if (data !== '' || data !== null) {
          const arr = []
          data.forEach((item, index) => {
            if (item.storeUrl) {
              item.storeUrl = item.storeUrl.split(';')
              if (index === 0) {
                item.storeUrl.forEach((img) => {
                  arr.push({
                    src: img
                  })
                })
              }
            }
          })
          this.foodStoreList = data
          this.atlas = arr
        }
      })
    },
// 精品菜单数据
    getFoodList (id) {
      axios.get(this, `/v1/food?belongCateringId=${id}`, null, (data) => {
        data.forEach(item => {
          if (item.dishesImages) {
            if (item.dishesImages.indexOf(QINIU_PREFIX) !== -1) {
              item.dishesImages = item.dishesImages + '-w200'
            } else {
              item.dishesImages = item.dishesImages
            }
          }
        })
        this.foodListItem = data
        this.$nextTick(() => {
          this.$refs.scrollRecom.style.width = (160 + 10) * 5 + 20 + 'px'
        })
      })
    },
// 推荐数据
    getRecommend (id) {
      axios.get(this, `v1/recommendStore?curStoreId=${id}`, null, (data) => {
        data.forEach((item, index) => {
          if (item.storeUrl) {
            item.storeUrl = item.storeUrl.split(';')
          }
        })
        this.recommendList = data.slice(0, 5)
      })
    },
// 点击推荐跳转内容
    tofoodDetailsOne (id) {
      this.$refs.scroll.scrollTo(0, 0)
      this.opacity = 0
      this.fontColor = '#fff'
      this.statusBarColor = 'white'
      this.getFoodList(id)
      this.getRecommend(id)
      this.getFoodStore(id)
    }
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.foodList {
  background $color-background
  position fixed
  top 0
  right 0
  bottom 0
  left 0
  z-index 100
  .foodListItem {
    .foodItemTopImg {
      position relative
      .detailTopBgImg {
        width 100%
      }
      .detailBgImg {
        position absolute 
        bottom 5px  
        width 100%
      }
      .img-num {
        position absolute
        right 12px
        bottom 50px
        line-height 1
        color #ffffff
        font-size 12px
        i {
          margin-right 4px
        }
      }
    }
  }
  .foodContent {
    margin-top -8px
    .foodTopTitle {
      padding 0 15px
      background #fff
      margin-bottom 10px
      h3 {
        font-size 18px
      }
      .foodTopAddress {
        padding 10px 0  
        color $color-text-3
      }
      .foodTopTitleDesc {
        font-size $font-size-title
        color $color-text-3 
        border-bottom 1px solid $color-border 
        padding 10px 0
      }
    }
    .foodMoreInformation {
      padding 10px 15px
      h3 {
        padding-bottom 10px
      }
    }
    .foodSetMeal {
      background #fff
      .foodItemAll {
        padding 8px 15px
        font-size 18px
      }
      .foodListItem {
        padding 0 15px 
        background #fff
        .foodItem {
          border-bottom 1px solid $color-border
          display flex
          padding 15px 0
          img {
            width 90px
            height 80px
            line-height 80px
            margin-right 10px
          }
          .foodItemRight {
            width 70%
            .foodTitle {
              font-size $font-size-title
              no-wrap-n(2)
            }
            .foodAddress {
              no-wrap()
              width 90%
              font-size $font-size-desc
              color $color-text-3
            }
            .price {
              display flex
              justify-content space-between
              width 90%
              margin-top 10px
              .priceDetails {
                font-size $font-size-title 
                font-weight bold
              }
              .btn {
                color $color-theme
              }
            }
          }
        }
      }
    }
    .contentWrapper {
      background-color: #fff;
      padding 0 0 10px
      .scrollRecom{
        display flex
        background #fff
        margin 10px 10px
        .recommend{
          margin 0 5px
          position relative
          box-shadow $box-shadow
          width 160px
          height 215px
          img{
            width 160px
            height 125px
            border-radius 2px
          }
          .iconPic{
            position absolute
            top 5px
            left 10px
            width 50px
            z-index 100
          }
          .centent{
            overflow hidden
            text-overflow ellipsis
            display -webkit-box
            -webkit-line-clamp 2
            -webkit-box-orient vertical
            font-size $font-size-title
            color $color-text-1
            padding 0 5px
            // position absolute
            // bottom 10px
            // left 10px
          }
          .cententPrice {
            font-size $font-size-title
            margin 10px 5px 0
            font-weight bold
          }
        }
      }
    }
    .foodCommend {
      padding 8px 15px
      margin-top 10px
      background #fff
    }
  }
}

</style>
